<!--  -->
<template>
  <div class="salesOrder">
    <div class="screen">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="收货人名字">
          <el-input v-model="formInline.shippingName"></el-input>
        </el-form-item>
        <el-form-item label="收货人电话">
          <el-input v-model="formInline.shippingTel"></el-input>
        </el-form-item>
        <el-form-item label="订单编号">
          <el-input v-model="formInline.orderNum"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- tab切换 -->
    <div class="tabSwitch">
      <el-radio-group v-model="radio1">
        <el-radio-button label="全部"></el-radio-button>
        <el-radio-button label="待付款"></el-radio-button>
        <el-radio-button label="待采购"></el-radio-button>
        <el-radio-button label="待分拣"></el-radio-button>
        <el-radio-button label="已分拣"></el-radio-button>
        <el-radio-button label="备货中"></el-radio-button>
        <el-radio-button label="已配送"></el-radio-button>
        <el-radio-button label="已验收"></el-radio-button>
      </el-radio-group>
      <el-button type="primary" @click="orderSortList">装箱</el-button>
    </div>
    <!-- 表格 -->
    <div class="orderList">
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" label="序号" width="55"></el-table-column>
        <el-table-column prop="orderNum" label="订单编号" width="auto"></el-table-column>
        <el-table-column prop="orderType" label="订单类型" width="atuo"></el-table-column>
        <el-table-column prop="delivery" label="配送类型" width="atuo"></el-table-column>
        <el-table-column prop="shippingName" label="收货人姓名" width="auto"></el-table-column>
        <el-table-column prop="shippingTel" label="收货人电话" width="auto"></el-table-column>
        <el-table-column prop="tranOrderTime" label="订单时间" width="auto"></el-table-column>
        <el-table-column prop="sortStatus" label="状态" width="atuo">
          <template slot-scope="scope">
            <span v-if="scope.row.sortStatus == 0">未装箱</span>
            <span v-if="scope.row.sortStatus == 1">已装箱</span>
        
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 遮罩层 -->
    <div class="pape">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
// 导入的其他文件 例如：import moduleName from 'modulePath';
import { orderList, goodsCategory, lionfishSort } from "@/api/orderList.js";
export default {
  //import所引入的组件注册
  components: {},

  data() {
    return {
      radio1: "全部",
      categories: [],
      tableData: [],
      multipleSelection: [],
      selectedIDs: [],
      orderType: [],
      formInline: {
        shippingName: "",
        shippingTel: "",
        orderNum: "",
        pageNo: 1
      },
      total: 1
    };
  },

  //监听属性
  computed: {},

  //监控data中的数据变化
  watch: {},

  //方法集合
  methods: {
    orderSort() {},
    handleCurrentChange(val) {
      console.log(val);
      this.formInline.pageNo = val;
      this.sendfoodList();
    },
    handleSearch() {
      this.sendfoodList();
    },
    Category() {
      goodsCategory().then(res => {
        const list = res.rows.map(item => {
          return { value: item.id, label: item.name };
        });
        this.categories = list;
      });
    },
    sendfoodList() {
      let data = {
        shippingName: this.formInline.shippingName,
        shippingTel: this.formInline.shippingTel,
        orderNum: this.formInline.orderNum,
        pageNo: this.formInline.pageNo
      };
      orderList(data).then(res => {
        console.log(res);
        this.total = res.total;
        this.tableData = res.rows;
      });
    },
    orderSortList() {
      lionfishSort(this.selectedIDs).then(res => {
        if (res.code == 20000) {
          this.$message({ type: "success", message: res.msg });
          this.orderList();
        } else {
          this.$message({ type: "waining", message: res.msg });
        }
        console.log(res);
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      let ids = [];
      this.multipleSelection.map(item => {
        ids.push(item.orderId);
      });
      this.selectedIDs = ids;
      console.log(ids);
    }
  },

  //创建完成 访问当前this实例
  created() {},
  //挂载完成 访问DOM元素
  mounted() {
    this.Category();
    this.sendfoodList();
  }
};
</script>
<style lang='scss' scoped>
.salesOrder {
  .screen {
    padding: 20px;
    font-family: "宋体";
    border-bottom: 20px solid #f4f4f5;
    .el-form-item__label {
      color: #606266;
      font-size: 14px;
      width: 100px;
    }
  }
  .tabSwitch {
    padding: 20px;
    display: flex;
    justify-content: space-between;
  }
  .elButton {
    padding: 0 20px;
  }
  .orderList {
    padding: 20px;
  }
  .pape {
    text-align: center;
    padding: 10px;
  }
}
</style>